<template>
  <div class="app-container app-containerlivingAllowances app-containerMoneytabel">
    <div class="filter-container">
      <el-date-picker type="daterange" size="small" value-format="timestamp" v-model="listQuery.queryTime" range-separator="-" start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
      <el-button class="filter-item filter-itemBut" type="primary" size="small" icon="el-icon-search" @click="handleFilter">搜索</el-button>
    </div>
    <el-row class="filter-container-option">
      <div style="margin-right: 15px;" :span="1">
        <el-button type="warning" size="small" @click="handleExportExcel" plain>导出</el-button>
      </div>
      <div style="margin-right: 15px;" :span="1">
        <el-button type="primary" size="small" @click="printPress(1)" plain>打印</el-button>
      </div>
    </el-row>
    <el-table :data="list" v-loading="listLoading" element-loading-text="Loading" tooltip-effect="dark"
      @selection-change="handleSelectionChange" border fit highlight-current-row ref="multipleTable">
      <el-table-column 
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column type="index" label="序号" width="50"></el-table-column>
      <el-table-column label="地区" align="center">
        <template slot-scope="scope">
          {{scope.row.areaName}}
        </template>
      </el-table-column>
      <el-table-column label="城市低保对象" align="center" >
        <template slot-scope="scope">
          {{scope.row.cityLivingAllowances}}
        </template>
      </el-table-column>
      <el-table-column label="城市低收入对象" align="center" >
        <template slot-scope="scope">
          {{scope.row.cityLowIncome}}
        </template>
      </el-table-column>
      <el-table-column label="农村五保对象" align="center" >
        <template slot-scope="scope">
          {{scope.row.agriculturalFiveGuarantees}}
        </template>
      </el-table-column>
      <el-table-column label="农村低保对象" align="center">
        <template slot-scope="scope">
          {{scope.row.agriculturalLivingAllowances}}
        </template>
      </el-table-column>
      <el-table-column label="农村困难对象" align="center" >
        <template slot-scope="scope">
          {{scope.row.agriculturalSuffering}}
        </template>
      </el-table-column>
      <el-table-column label="农村计生困难对象" align="center">
        <template slot-scope="scope">
          {{scope.row.agriculturalFppSuffering}}
        </template>
      </el-table-column>
      <el-table-column label="本科" align="center" >
        <template slot-scope="scope">
          {{scope.row.bachelor}}
        </template>
      </el-table-column>
      <el-table-column label="大专" align="center">
        <template slot-scope="scope">
          {{scope.row.college}}
        </template>
      </el-table-column>
      <el-table-column label="中专/技校" align="center" >
        <template slot-scope="scope">
          {{scope.row.secondarySchool}}
        </template>
      </el-table-column>
      <el-table-column label="高中" align="center" >
        <template slot-scope="scope">
          {{scope.row.highSchool}}
        </template>
      </el-table-column>
      <el-table-column label="补助金额" align="center" >
        <template slot-scope="scope">
          {{ scope.row.money}}
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="教育救助统计" width="70%" :visible.sync="isexpressPrint">
      <div id="expressPrint">
        <expressPrint :list="multipleSelection"></expressPrint>
      </div>
      <div class="expressPrint_ft">
        <el-button type="primary" size="small" @click="printPress(2)" plain>确认打印</el-button>
      </div>
    </el-dialog>
    <el-dialog title="导出数据项" :visible.sync="exportExcelDialog">
      <el-checkbox :indeterminate="isIndeterminate" v-model="checkAllColumns"  @change="handleCheckAllColumnsChange">全选</el-checkbox>
      <el-checkbox  v-model="listQuery.xlsx">是否导出xlsx</el-checkbox>
      <div style="margin: 15px 0;"></div>
      <el-checkbox-group v-model="listQuery.columns"  @change="handleCheckColumnsChange">
        <el-checkbox v-for="column in exportColumns" :label="column.value" :checked="column.checked" :key="column.value">{{column.label}}</el-checkbox>
      </el-checkbox-group>
      <div class="expressPrint_ft">
        <el-button type="primary" size="small" @click="exportExcel" plain>确认导出</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  esReport
} from "@/api/statistical";
import expressPrint from "./module/expressPrint";
import { getToken } from "@/utils/auth";
export default {
  components: {
    expressPrint
  },
  data() {
    return {
      options: this.$store.state.dict.options,
      isexpressPrint: false,
      list: null,
      listLoading: true,
      baseURL: process.env.BASE_API,
      exportExcelUrl: process.env.BASE_API + "/educational-support/report/export",
      multipleSelection: [],
      listQuery: {
        startTime: null,
        endTime: null,
        queryTime: [],
        approvalKey: null,
        columns: [],
        xlsx: true,
        sort: "+id"
      },
      exportExcelDialog: false,
      isIndeterminate: true,
      checkAllColumns: false,
      exportColumns: [
        { label: "地区", value: "areaName" },
        { label: "城市低保对象", value: "cityLivingAllowances" },
        { label: "城市低收入对象", value: "cityLowIncome" },
        { label: "农村五保对象", value: "agriculturalFiveGuarantees" },
        { label: "农村低保对象", value: "agriculturalLivingAllowances" },
        { label: "农村困难对象", value: "agriculturalSuffering" },
        { label: "农村计生困难对象", value: "agriculturalFppSuffering" },
        { label: "本科", value: "bachelor" },
        { label: "大专", value: "college" },
        { label: "中专/技校", value: "secondarySchool" },
        { label: "高中", value: "highSchool" },
        { label: "补助金额", value: "money" }
      ],
    };
  },
  mounted: function() {
    this.listQuery.startTime= Math.round(this.getFirstDayOfYear(new Date()) / 1000)
    this.listQuery.endTime= Math.round(new Date() / 1000)
    this.listQuery.queryTime= [this.listQuery.startTime*1000,this.listQuery.endTime*1000]
    this.fetchData();
  },
  methods: {
    printPress(i) {
      if (this.multipleSelection.length > 0) {
        if (i == 1) {
          this.isexpressPrint = true;
        } else if (i == 2) {
          if (getLodop()) {
            this.CreateOneFormPage();
          }
        } else {
          this.isexpressPrint = false;
        }
      } else {
        this.$message({
          message: "请选择打印内容",
          type: "info"
        });
      }
    },
    CreateOneFormPage() {
      let LODOP = "";
      LODOP = getLodop();
      LODOP.PRINT_INIT("教育救助统计");
      LODOP.SET_PRINT_STYLE("FontSize", 16);
      LODOP.SET_PRINT_PAGESIZE(3);
      LODOP.ADD_PRINT_HTM(
        "0",
        "0",
        "100%",
        "100%",
        document.getElementById("expressPrint").innerHTML
      );
      LODOP.PREVIEW();
    },
    fetchData() {
      this.listLoading = true;
      esReport(this.listQuery).then(response => {
        this.list = response.data;
        this.listLoading = false;
      });
      this.listLoading = false;
    },
    handleFilter() {
      if (this.listQuery.queryTime.length > 1) {
        this.listQuery.startTime = this.listQuery.queryTime[0]/1000
        this.listQuery.endTime = this.listQuery.queryTime[1]/1000
      }
      this.listQuery.page = 1;
      this.fetchData();
    },
    handleSizeChange(val) {
      if (this.listQuery.queryTime.length > 1) {
        this.listQuery.startTime = this.listQuery.queryTime[0]/1000
        this.listQuery.endTime = this.listQuery.queryTime[1]/1000
      }
      this.listQuery.size = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      if (this.listQuery.queryTime.length > 1) {
        this.listQuery.startTime = this.listQuery.queryTime[0]/1000
        this.listQuery.endTime = this.listQuery.queryTime[1]/1000
      }
      this.listQuery.page = val;
      this.fetchData();
    },
    setAreaCode(value) {
      if (value.code) {
        this.listQuery.areaCode = value.code;
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleExportExcel() {
      //this.listQuery.columns = [];
      this.exportExcelDialog = true;
    },
    handleCheckAllColumnsChange(val) {
      if (val) {
        this.exportColumns.forEach(e => {
          e.checked = true;
          this.listQuery.columns.push(e.value);
        });
      } else {
        this.exportColumns.forEach(e => {
          e.checked = false;
        });
        this.listQuery.columns = [];
      }
      this.isIndeterminate = false;
    },
    handleCheckColumnsChange(value) {
      let checkedCount = value.length;
      this.checkAllColumns = checkedCount === this.exportColumns.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.exportColumns.length;
    },
    exportExcel() {
      let url = this.exportExcelUrl + "?X-Token=" + getToken();
      url += this.joinQueryCondition();
      window.open(url);
    },

    joinQueryCondition() {
      let condition = "";
      if (this.listQuery.startTime) {
        condition += "&startTime=" + this.listQuery.startTime;
      }
      if (this.listQuery.endTime) {
        condition += "&endTime=" + this.listQuery.endTime;
      }
      condition += "&xlsx=" + this.listQuery.xlsx;
      if (this.listQuery.columns.length > 0) {
        condition += "&columns=" + this.listQuery.columns.join(",");
      }
      return condition;
    },
    //获取当年第一天
    getFirstDayOfYear (date) {
      date.setDate(1);
      date.setMonth(0);
      date.setHours(0);
      date.setMinutes(0);
      date.setSeconds(0);
      return date;
    }
  }
};
</script>

<style scoped>
.cellOption {
  float: right;
}
.small-padding,
.fixed-width {
  display: flex !important;
  justify-content: center !important;
}
.app-containerlivingAllowances .el-checkbox {
  margin-left: 30px;
}
/*
.el-table_1_column_16 .cell {
   display: flex !important; */
/* justify-content: space-around !important; 
}*/
.expressPrint_ft {
  height: 90px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 45px;
}

.expressPrint_title {
  height: 80px;
  width: 100%;
}

.expressPrint_main {
  /* width: 900px; */
  height: 680px;
  overflow: hidden;
  border-radius: 5px;
  background-color: #fff;
}

#expressPrint {
  /* width: 850px; */
  height: 500px;
  background-color: #fff;
  overflow: scroll;
  margin-left: 25px;
  border: 1px solid #ccc;
}

.expressPrint_box {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 2008;
}

/* 打印 */

.filter-container-option {
  display: flex;
  flex-wrap: nowrap;
  margin-bottom: 15px;
}

.filter-container {
  margin-bottom: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.pagination-container {
  margin-top: 25px;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
}

.filter-itemBut {
  margin-left: 25px;
}
</style>